<template>
  <div v-loading="submitting || loading" class="payment-order-detail-container">
    <!-- Document Information Group -->
    <el-card class="info-card" shadow="never">
      <template #header>
        <div class="card-header">
          <div class="title-wrapper">
            <span class="title-text">单据信息</span>
            <span v-if="multiStoreMode" class="store-name">{{ paymentOrder.storeName }}</span>
             <!--
            <el-tag v-if="!editMode"
              :type="paymentOrder.status.code === CommonOrderStatus.Passed.code ? 'success' : 'info'" size="small"
              class="status-tag">
              {{ paymentOrder.status.name }}
            </el-tag>
          -->
          </div>
          <!-- Action Buttons -->
          <div class="action-buttons" v-if="!editMode">
            <el-button plain @click="handleCopy">
              <el-icon>
                <CopyDocument />
              </el-icon> 复制
            </el-button>
            <el-button plain @click="handlePrint" style="margin-right: 20px">
              <el-icon>
                <Printer />
              </el-icon> 打印
            </el-button>
            <el-button v-if="PaymentOrder.hasEditPermission()" type="primary" plain @click="handleEdit">
              <el-icon>
                <Edit />
              </el-icon> 编辑
            </el-button>
            <el-button v-if="PaymentOrder.hasEditPermission()" type="danger" plain @click="handleDelete">
              <el-icon>
                <Delete />
              </el-icon> 删除
            </el-button>
          </div>
        </div>
      </template>
      <el-form ref="ruleFormRef" :model="formData" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="6">
            <input-widget-web v-model="formData.title" label="单据标题" prop="title" :readonly="!editMode" />
          </el-col>
          <el-col v-if="!editMode" :span="6">
            <input-widget-web v-model="formData.docCode" label="单据编号" prop="docCode" :readonly="!editMode" />
          </el-col>

          <el-col :span="6">
            <partner-select v-model="formData.targetObject" label="供应商" prop="targetObject" :readonly="!editMode"
              initialPartnerType="supplier" :rules="[{ required: true, message: '请选择供应商', trigger: 'blur' }]"
              :basicUiAction="basicUiAction" />
          </el-col>

          <el-col :span="6">
            <date-time-select v-model="formData.operateDate" label="付款日期" prop="operateDate" :readonly="!editMode"
              type="datetime" />
          </el-col>

          <el-col :span="6">
            <employee-select v-model="formData.operator" label="经办人" prop="operator" :readonly="!editMode"
              :enterpriseMgtUiAction="enterpriseMgtUiAction" />
          </el-col>
 <!--
          <el-col :span="6">
            <el-form-item label="单据类型">
              <el-select v-model="formData.fundTypeCode" :disabled="!editMode">
                <el-option v-for="type in paymentFundTypes" :key="type.code" :label="type.name" :value="type.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          -->
        </el-row>
      </el-form>
    </el-card>

    <!-- Pending Payment Orders Group -->
    <el-card class="items-card" shadow="never">
      <template #header>
        <div class="card-header">
          <div class="title-wrapper">
            <div class="summary-container">
              <span class="title-text">待付款单据</span>
              <span class="total-info">
                共{{ paymentOrder.pendingPaymentOrderRelationList.length }}条待付款记录
              </span>
            </div>
            <!-- 添加和删除按钮 -->
            <div v-if="editMode" class="action-buttons">
              <el-button type="primary" size="small" @click="handleAddPendingOrder">
                添加待付款单
              </el-button>
              <el-button type="danger" size="small" @click="handleDeleteSelectedPendingOrders">
                删除待付款单
              </el-button>
            </div>
          </div>
        </div>
      </template>

      <el-table :data="paymentOrder.pendingPaymentOrderRelationList" style="width: 100%"
        @selection-change="handleSelectionChange">
        <!-- 勾选列 -->
        <el-table-column type="selection" width="55" v-if="editMode" />

        <el-table-column label="单据编号" width="180">
          <template #default="scope">
            {{ scope.row.pendingOrder.docCode }}
          </template>
        </el-table-column>

        <el-table-column label="源单据标题" width="180">
          <template #default="scope">
            {{ scope.row.pendingOrder.title }}
          </template>
        </el-table-column>

        <el-table-column label="总金额" align="right" width="100">
          <template #default="scope">
            {{ formatCurrency(scope.row.pendingOrder.totalMount) }}
          </template>
        </el-table-column>

        <el-table-column label="已核销" align="right" width="100">
          <template #default="scope">
            {{ formatCurrency(scope.row.pendingOrder.totalMount -
              scope.row.pendingOrder.pendingPayMount -
              scope.row.hexiaoAmountBeforeEdit +
              scope.row.hexiaoAmount) }}
          </template>
        </el-table-column>

        <el-table-column label="待核销" align="right" width="100">
          <template #default="scope">
            {{ formatCurrency(scope.row.pendingOrder.pendingPayMount +
              scope.row.hexiaoAmountBeforeEdit -
              scope.row.hexiaoAmount) }}
          </template>
        </el-table-column>

        <el-table-column label="本次核销" align="right" width="120">
          <template #default="scope">
            <input-cell v-if="editMode" :readonly="!editMode" :model-value="scope.row.hexiaoAmount" :numberMode="true"
              :precision="fundPrecision" @update:model-value="val => updatePendingOrderHexiaoAmount(scope.row, val)" />
            <span v-else>{{ formatCurrency(scope.row.hexiaoAmount) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-row :gutter="16" class="summary-row">
      <el-col :span="12">
        <el-card class="amount-summary-card" shadow="never">
          <template #header>
            <div class="card-header">
              <div class="title-wrapper">
                <span class="title-text">付款信息</span>
              </div>
            </div>
          </template>

          <div class="amount-summary-content">
            <div class="amount-item">
              <span class="label right-align">核销金额:</span>
              <span class="value left-align">{{ formatCurrency(paymentOrder.hexiaoMount) }}</span>
            </div>

            <div class="amount-item">
              <span class="label right-align">优惠金额:</span>
              <div class="value left-align">
                <input-cell :width="'200px'" :readonly="!editMode" :model-value="paymentOrder.discount"
                  :numberMode="true" :precision="fundPrecision"
                  @update:model-value="val => paymentOrder.discount = val" />
              </div>
            </div>

            <!-- 预付冲抵 
            <div class="amount-item">
              <span class="label right-align">预付冲抵:</span>
              <value-checkbox-widget class="value left-align" :display-text="preOffsetText"
                :check-value="paymentOrder.enablePrePaymentOffset" :editable="editMode" width="200px"
                @update:check-value="val => paymentOrder.enablePrePaymentOffset = val">
                <span v-if="editMode">{{ "冲抵" + formatCurrency(paymentOrder.prePaymentHexiaoMount) }}</span>
              </value-checkbox-widget>
            </div>
            -->

            <div class="amount-item">
              <span class="label right-align">付款金额:</span>
              <div class="value left-align">
                <input-cell :width="'200px'" :readonly="!editMode" :model-value="paymentOrder.payMount"
                  :numberMode="true" :precision="fundPrecision"
                  @update:model-value="val => paymentOrder.payMount = val" />
              </div>
            </div>

            <div v-if="paymentOrder.payMount != 0" class="amount-item">
              <span class="label right-align">付款账户:</span>
              <div class="value left-align" style="width: 200px;">
                <fund-account-select :readonly="!editMode" v-model="paymentOrder.fundAccount" prop="fundAccount"
                  :fund-ui-action="fundUiAction" />
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="other-info-col">
        <!-- Other Information Group -->
        <el-card class="other-info-card" shadow="never">
          <template #header>
            <div class="card-header">
              <div class="title-wrapper">
                <span class="title-text">其他信息</span>
              </div>
            </div>
          </template>

          <el-descriptions v-if="!editMode" :column="1">
            <el-descriptions-item v-if="latestUpdateInfo" label="最近更新">{{ latestUpdateInfo }}</el-descriptions-item>
            <el-descriptions-item label="制单人">{{ docMaker }}</el-descriptions-item>
            <el-descriptions-item label="备注">
              <div class="remark-content">{{ paymentOrder.remark || '-' }}</div>
            </el-descriptions-item>
          </el-descriptions>

          <!-- 注意本处增加一个div , 不然第一个控件左对齐有问题，具体问题待查  -->
          <div> </div>

          <!-- 备注 -->
          <input-widget-web class="value left-align" v-if="editMode" v-model="formData.remark" label="备注" prop="remark"
            placeholder="请输入备注信息" :remarkMode="true" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 底部操作栏 (仅在编辑模式下显示) -->
    <bottom-bar :visible="editMode">
      <template #left>
        <span class="doc-maker-info">制单人: {{ docMakerBottmBar }}</span>
      </template>
      <template #right>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </template>
    </bottom-bar>

    <!-- 待付款单选择弹窗 -->
    <pending-payment-order-select-dialog ref="pendingOrderSelectDialog" :fund-ui-action="fundUiAction"
      @select="handlePendingOrderSelect" />

  </div>
</template>

<script>
import { PaymentOrder } from '../../public/engine/funds/paymentOrder'
import { PaymentFundType } from '../../public/engine/common/fundDefinition'
import { PendingPaymentOrder } from '../../public/engine/funds/pendingPaymentOrder'
import { Employee } from '../../public/engine/enterpriseMgt/employee'
import { CsDouble } from '../../public/engine/common/csDouble'
import { CsFundDouble } from '../../public/engine/common/csFundDouble'
import { CommonOrderStatus } from '../../public/engine/common/docDefinition'
import { FundUiAction } from '../../public/engine/uiAction/fundUiAction'
import { Util } from '../../public/utils/util'
import { DateUtil } from '../../public/utils/dateUtil'
import { Engine } from '../../public/engine/engine'
import { ElMessage, ElMessageBox } from 'element-plus'
import { BasicUiAction } from '../../public/engine/uiAction/basicUiAction'
import { EnterpriseMgtUiAction } from '../../public/engine/uiAction/enterpriseMgtUiAction.js'
import { ActionResult, ActionResultType } from '../../public/engine/common/actionResult.js'
import InputWidgetWeb from '../../public/views/componentsWeb/InputWidgetWeb.vue'
import PartnerSelect from '../../public/views/componentsWeb/PartnerSelect.vue'
import DateTimeSelect from '../../public/views/componentsWeb/DateTimeSelect.vue'
import EmployeeSelect from '../../public/views/componentsWeb/EmployeeSelect.vue'
import InputCell from '../../public/views/componentsWeb/InputCell.vue'
import ValueCheckboxWidget from '../../public/views/componentsWeb/ValueCheckboxWidget.vue'
import FundAccountSelect from '../../public/views/componentsWeb/FundAccountSelect.vue'
import BottomBar from '../../public/views/componentsWeb/BottomBar.vue'
import EventBus from '../../public/engine/ipc/eventBus'
import TabUtil from '@/plugins/tab'
import { MessageUtil } from '@/utils/MessageUtil'
import { Definition } from '../../public/engine/common/definition.js'
import PendingPaymentOrderSelectDialog from '../../views/fund/pendingPaymentOrderSelectDialog.vue'
import { ipcParam } from '../../public/engine/ipc/ipcParam.js'

export default {
  name: 'paymentorder',
  components: {
    InputWidgetWeb,
    PartnerSelect,
    DateTimeSelect,
    EmployeeSelect,
    InputCell,
    ValueCheckboxWidget,
    FundAccountSelect,
    BottomBar,
    PendingPaymentOrderSelectDialog
  },

  data() {
    return {
      paymentOrder: PaymentOrder.empty({
        fundType: PaymentFundType.CGFK,
        operator: Engine.profile?.nickName,
        operatorId: Engine.profile?.id
      }),
      orgPaymentOrder: PaymentOrder.empty({
        fundType: PaymentFundType.CGFK,
        operator: Engine.profile?.nickName,
        operatorId: Engine.profile?.id
      }),
      basicUiAction: new BasicUiAction(),
      fundUiAction: new FundUiAction(),
      enterpriseMgtUiAction: new EnterpriseMgtUiAction(),
      loading: false,
      CommonOrderStatus,
      PaymentOrder,
      PaymentFundType,
      CsDouble,
      CsFundDouble,
      editMode: false,
      orderId: "",
      formData: {
        docCode: '',
        title: '',
        targetObject: null,
        operateDate: null,
        operator: null,
        fundTypeCode: PaymentFundType.CGFK.code,
        remark: '',
        updator: null,
        docMaker: null,
      },
      retValue: null,
      selectedPendingOrders: [],
      submitting: false,
      paymentFundTypes: [
        PaymentFundType.CGFK,
        PaymentFundType.YFD,
        PaymentFundType.YFZ,
        PaymentFundType.QTFK,
        PaymentFundType.FKTK,
        PaymentFundType.YFZ_TZ,
        PaymentFundType.TOTAL_ACCOUNT_TZ,
      ]
    }
  },

  mounted() {
    this.retValue = null;
    this.orderId = (this.$route.params.id || this.$route.query.id) || "";

    if (!Util.isEmpty(this.orderId)) {
      this.loadPaymentOrderData();
    } else {
      // 如果有待付款单据参数，则直接添加到付款单中
      if (this.$route.query.createdWithPendingPaymentOrders) {

        if (ipcParam.createdWithPendingPaymentOrders && ipcParam.createdWithPendingPaymentOrders.pendingOrders
          && ipcParam.createdWithPendingPaymentOrders.targetObj) {
          this.paymentOrder.targetObject = ipcParam.createdWithPendingPaymentOrders.targetObj;
          this.handlePendingOrderSelect(ipcParam.createdWithPendingPaymentOrders.pendingOrders);
          ipcParam.createdWithPendingPaymentOrders = null;
        }

      }


      this.editMode = true;
      this.syncFormData();
    }
  },

  beforeUnmount() {
    if (this.retValue) {
      EventBus.emit('paymentOrderUpdated', null);
      this.retValue = null;
    }
  },

  deactivated() {
    if (this.retValue) {
      EventBus.emit('paymentOrderUpdated', null);
      this.retValue = null;
    }
  },

  computed: {

    multiStoreMode() {
      return Engine.getOrgSettings().multiStoreMode;
    },
    latestUpdateInfo() {
      return (this.paymentOrder.updateor && this.paymentOrder.updateDate) ?
        (this.paymentOrder.updateor + "  " + DateUtil.getDayTitle(this.paymentOrder.updateDate)) : null;
    },

    docMaker() {
      return (this.paymentOrder.id && this.paymentOrder.docMaker && this.paymentOrder.recordDate) ?
        (this.paymentOrder.docMaker + "  " + DateUtil.getDayTitle(this.paymentOrder.recordDate)) : null
    },

    docMakerBottmBar() {
      return Engine.profile?.nickName.isEmpty
        ? Engine.profile?.userName
        : Engine.profile?.nickName;
    },

    fundPrecision() {
      return Definition.fundPrecision;
    },

    preOffsetText() {
      return this.editMode ?
        "余额:" + Util.getFundString(this.paymentOrder.targetObjectPrePaymentMount - this.paymentOrder.prePaymentHexiaoMount)
        : this.formatCurrency(this.paymentOrder.prePaymentHexiaoMount, true);
    }
  },

  methods: {
    syncFormData() {
      this.formData = {
        docCode: this.paymentOrder.docCode,
        title: this.paymentOrder.title,
        targetObject: this.paymentOrder.targetObject,
        operateDate: this.paymentOrder.operateDate,
        operator: new Employee({
          id: this.paymentOrder.operatorId,
          name: this.paymentOrder.operator
        }),
        fundTypeCode: this.paymentOrder.fundType.code,
        remark: this.paymentOrder.remark,
        updator: (this.paymentOrder.updateor && this.paymentOrder.updateDate) ?
          (this.paymentOrder.updateor + "  " + DateUtil.getDayTitle(this.paymentOrder.updateDate)) : null,
        docMaker: (this.paymentOrder.id && this.paymentOrder.docMaker && this.paymentOrder.recordDate) ?
          (this.paymentOrder.docMaker + "  " + DateUtil.getDayTitle(this.paymentOrder.recordDate)) : null,
      };
    },

    fillWithFormData() {
      this.paymentOrder.title = this.formData.title;
      this.paymentOrder.targetObject = this.formData.targetObject;

      // formData.operateDate 控件变更日期会转换为字符串，这里需要转换回Date对象
      if (!(this.formData.operateDate instanceof Date)) {
        this.paymentOrder.operateDate = DateUtil.strToDate(this.formData.operateDate);
      } else {
        this.paymentOrder.operateDate = this.formData.operateDate;
      }

      this.paymentOrder.setOperator({
        operator: this.formData.operator.name,
        operatorId: this.formData.operator.id
      });
      this.paymentOrder.remark = this.formData.remark;
    },

    updatePendingOrderHexiaoAmount(pendingOrderRelation, value) {
      const result = this.paymentOrder.validateAndUpdatePendingOrderHeXiaoValue(
        pendingOrderRelation.pendingOrder.id,
        value,
        { hexiaoAmountBeforeEidt: pendingOrderRelation.hexiaoAmountBeforeEdit }
      );

      if (result) {
        MessageUtil.showErrorMsg(result);
      }
    },

    handlePendingOrderSelect(pendingOrders) {
      if (pendingOrders && pendingOrders.length > 0) {
        this.paymentOrder.addPendingPaymentOrder(pendingOrders, { orderBeforeEdit: this.orgPaymentOrder, hexiaoAll: true });
      }
    },

    handleCopy() {
      this.paymentOrder = PaymentOrder.clone(this.paymentOrder);
      this.paymentOrder.id = '';
      this.paymentOrder.orderBeforeEdit = null;
      this.editMode = true;
      MessageUtil.showSuccessMsg("复制完成");
    },

    handlePrint() {
      // TODO: Implement print functionality
    },

    handleEdit() {
      this.editMode = true;
    },

    async handleDelete() {
      if (Util.isEmpty(this.paymentOrder.id)) {
        TabUtil.closePage();
      } else {
        try {
          await ElMessageBox.confirm("确定要删除该付款单据吗？", "删除确认", {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          });

          this.submitting = true;

          let delResult = await this.fundUiAction.removePaymentOrder({
            orderId: this.paymentOrder.id,
            docType: this.paymentOrder.docType
          });

          if (delResult == null) {
            this.retValue = new ActionResult({ type: ActionResultType.Del });
            MessageUtil.showSuccessMsg("删除成功");
            TabUtil.closePage();
          }
        } catch (error) {
          if (error !== 'cancel') {
            console.error("paymentOrderDetailPage handleDelete error:", error);
            ElMessage.error("删除操作失败");
          }
        } finally {
          this.submitting = false;
        }
      }
    },

    handleAddPendingOrder() {
      if (!this.formData.targetObject || !this.formData.targetObject.id) {
        MessageUtil.showWarningMsg("请先选择供应商");
        return;
      }

      this.$refs.pendingOrderSelectDialog.open(
        this.paymentOrder.pendingPaymentOrderList,
        {
          targetObject: this.formData.targetObject,
          excludePendingOrders: this.paymentOrder.pendingPaymentOrderList,
        }
      );

    },

    handleSelectionChange(selection) {
      this.selectedPendingOrders = selection;
    },

    handleDeleteSelectedPendingOrders() {
      if (this.selectedPendingOrders.length === 0) {
        ElMessage.warning('请至少选择一条待付款记录进行删除');
        return;
      }

      const orderMap = {};
      this.selectedPendingOrders.forEach(order => {
        orderMap[order.pendingOrder.id] = true;
      });

      this.paymentOrder.removePendingPaymentOrder(orderMap);
      this.selectedPendingOrders = [];
    },

    // 取消编辑
    handleCancel() {
      this.paymentOrder = PaymentOrder.clone(this.orgPaymentOrder);
      this.editMode = false;
    },

    async handleSubmit() {
      try {
        // First validate the form
        await this.$refs.ruleFormRef.validate();

        // Validate the payment order
        const discountError = this.paymentOrder.validateOrder();
        if (discountError) {
          ElMessage.error(discountError);
          return;
        }

        const validationError = this.paymentOrder.validatePayMount(this.paymentOrder.payMount);
        if (validationError) {

          if (validationError.errorMsg) {
            if (validationError.msgBoxConfirm) {
              try {
                await ElMessageBox.confirm(
                  validationError.errorMsg,
                  '信息错误',
                  {
                    confirmButtonText: '确认',
                    type: 'error'
                  }
                );

                // 错误信息直接返回
                return;

              } catch (confirmError) {
                // User cancelled
                this.submitting = false;
                return;
              }
            }
            else {

              ElMessage.error(validationError.errorMsg);
              return;
            }
          }
          else if (validationError.warningMsg) {
            if (validationError.msgBoxConfirm) {
              try {
                await ElMessageBox.confirm(
                  validationError.warningMsg,
                  '确认提交',
                  {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }
                );

              } catch (confirmError) {
                // User cancelled
                this.submitting = false;
                return;
              }
            }
            else {

              ElMessage.error("validationError.errorMsg");
              return;
            }
          }


        }


        this.submitting = true;
        this.fillWithFormData();

        const orderResult = await this.fundUiAction.updateOrCreatePaymentOrder(this.paymentOrder, true);

        if (orderResult) {
          if (Util.isEmpty(this.paymentOrder.id)) {
            this.retValue = new ActionResult({ type: ActionResultType.New });
          } else {
            this.retValue = new ActionResult({ type: ActionResultType.UpdateCommon });
          }
        }

        if (orderResult) {
          ElMessage.success("提交保存成功");
          this.orderId = orderResult.id;
          this.editMode = false;
          this.loadPaymentOrderData();
        }
      } catch (error) {
        console.error('保存失败', error);
        ElMessage.error("保存失败");
      } finally {
        this.submitting = false;
      }
    },

    async loadPaymentOrderData() {
      try {
        this.loading = true;
        const res = await this.fundUiAction.getPaymentOrderDetailInfo(this.orderId);

        if (res) {
          this.paymentOrder = res;
          this.orgPaymentOrder = PaymentOrder.clone(res);
          this.syncFormData();
        } else {
          ElMessage.error('获取付款单详情失败');
        }
      } catch (error) {
        console.error('加载付款单数据失败:', error);
        ElMessage.error('加载付款单数据失败');
      } finally {
        this.loading = false;
      }
    },

    formatCurrency(value, readOnlyZeroDashLine = false) {
      return Util.getFundString(value, { zeroDashLine: readOnlyZeroDashLine && !this.editMode });
    }
  }
}
</script>

<style scoped>
.summary-row {
  margin-bottom: 16px;
  display: flex;
  align-items: stretch;
}

.summary-row .el-col {
  display: flex;
  flex-direction: column;
}

.summary-row .el-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.summary-row .el-card .el-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* For the other info card specifically, we need to make its content stretch */
.other-info-card .el-card__body>*:first-child {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Add these styles to the existing ones */
.amount-summary-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.amount-item {
  display: flex;
  align-items: center;
}

.amount-item .label.right-align {
  text-align: right;
  flex: 0 0 100px;
  color: #606266;
  margin-right: 12px;
  font-size: 13px;
}

.amount-item .value.left-align {
  text-align: left;
  flex: 1;
  font-size: 13px;
}

.payment-order-detail-container {
  padding: 16px;
  padding-bottom: 80px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 0px;
  padding: 0 16px;
}

.title-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.summary-container {
  flex: 1;
  min-width: 300px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.total-info {
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
}

.store-name {
  font-size: 12px;
  color: #606266;
}

.title-text {
  font-size: 16px;
  font-weight: bold;
}

.status-tag {
  margin-left: 12px;
}

.remark-content {
  white-space: pre-wrap;
  word-break: break-all;
}

.info-card,
.items-card,
.amount-summary-card,
.other-info-card {
  margin-bottom: 16px;
  border-radius: 8px;
}

.amount-item {
  display: flex;
  justify-content: space-between;
  padding: 0px 0;
}

.amount-item .label {
  color: #606266;
}

.amount-item .value {
  font-weight: bold;
}
</style>